{% extends "layout.html" %}

{% block css_m %}

    <style>
        td {
            text-align: center;


        }

        th {
            text-align: center;
        }
    </style>

{% endblock %}
{% block js_m %}
    <script type="text/javascript"
            src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.zh-CN.js"></script>
{% endblock %}

{% block content_body %}

    <div class="panel center-block panel-warning" style="width: 1050px;margin-top: 50px">
        <div class="panel-heading">
            <h1>新订单</h1>
        </div>
        <div class="panel-body">
            <div class="container center-block" style="width: 1000px">


                <div class="row">
                    {% for each in price_obj %}
                        <div class="col-sm-4 col-md-4">


                            <div class="thumbnail">
                                <img class="img-rounded" src="{{ each.item_image }}" alt="{{ each.item_name }}"
                                     style="width:100%;">
                                <div class="caption">


                                    <h3>

                                        {{ each.item_name }} <small
                                            id="price-{{ each.item_id }}">{{ each.item_price }}元</small>
                                        {% if each.item_discount != 1.00 %}
                                            <h5 id="dsc-{{ each.item_id }}">{% widthratio each.item_discount 1 100 %}折</h5>
                                        {% else %}
                                            <h5 id="dsc-{{ each.item_id }}"
                                                class="hidden">{% widthratio each.item_discount 1 100 %}折</h5>
                                        {% endif %}
                                    </h3>


                                    <p>{{ each.item_introduction }}</p>

                                    <div class="input-group">

                              <span class="input-group-addon">
                                <input type="checkbox" aria-label="..." id="{{ each.item_id }}">
                              </span>
                                        <input
                                                type="number" class="form-control"
                                                id="input-{{ each.item_id }}"
                                                aria-label="购买数量" placeholder="请输入购买数量" disabled="disabled">
                                    </div><!-- /input-group -->


                                </div>
                            </div>

                        </div>
                    {% endfor %}
                </div>

            </div>
        </div>
        <div class="panel-footer">
            <a class="btn btn-warning" id="conf" href="#">确定</a>
            <a class="btn btn-default" href="/customer/{{ pid }}/details.html/">取 消</a>
        </div>
    </div>

{% endblock %}

{% block content_bottom %}
    {#模态对话框#}

    <div class="modal fade " id="add-modal_id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true" style="z-index: 10000">
        <div class="modal-dialog modal-lg" style="width: 1000px">
            <div class="modal-content">
                <div class="modal-header">

                    <h2 class="modal-title" id="myModalLabel">
                        订单确认：
                    </h2>
                </div>

                <div class="modal-body">
                    <table class="table table-striped table-hover" style="width: 800px">
                        <thead>
                        <tr>


                            <th colspan="3" style="text-align: left">
                                <h3>{{ user_obj.name }} {{ user_obj.get_sex_display }} {{ user_obj.age }}岁</h3></th>

                        </tr>
                        <thead>
                        <tbody>

                        <tr style="text-align: center">
                            <td>购买时间：</td>
                            <td id="bill_datetime"></td>
                        </tr>

                        <tr style="text-align: center">
                            <td>订单原价：</td>
                            <td id="bill_amount_bf_dst"></td>


                        </tr>
                        <tr style="text-align: center">
                            <td>订单金额：</td>
                            <td id="bill_total"></td>


                        </tr>
                        <tr style="text-align: center">
                            <td>经办人：</td>
                            {% if operator_obj.nick_name %}
                                <td id="bill_operator">{{ operator_obj.nick_name }}</td>
                            {% else %}
                                <td id="bill_operator">{{ operator_obj.user_name }}</td>
                            {% endif %}

                        </tr>

                        </tbody>

                    </table>

                    <div class="checkbox">
                        <h4><strong>
                            <label class="text-success">
                                <input id="pay_or_not" type="checkbox" style="width: 20px">已支付
                            </label>
                        </strong></h4>
                    </div>
                </div>

                <div class="modal-footer">
                    <div class="panel-body center-block" style="width: 800px">
                        <form method="post" novalidate>
                            {% csrf_token %}
                            {% for field in form_add %}

                                <div class="hidden">
                                    <label>{{ field.label }}</label>
                                    {{ field }}
                                    <span style="color: red">{{ field.error.0 }}</span>

                                </div>

                            {% endfor %}
                            <input type="hidden" name="item_id_list" id="item_id_list">
                            <button type="submit" class="btn btn-primary" id="m_conf" style="margin-left: 60px">提交
                            </button>

                            <button type="button" class="btn btn-default" id="m_close">取消
                            </button>
                        </form>

                    </div>


                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <script>
        $(function () {
            $("input[type='checkbox']").click(function () {
                var iid = $(this).attr("id")
                if ($(this).is(":checked") === true) {
                    $("#input-" + iid).removeAttr("disabled")
                } else {
                    $("#input-" + iid).attr("disabled", "disabled")
                }
            });
            $("#conf").on("click", function () {
                $('#add-modal_id').modal('show');
                var bill_amount = 0
                var bill_amount_bf_dst = 0
                var item_id_list = {}


                $.each($("input:checked"), function (idx, input_obj) {

                    var num_ = $("#input-" + $(input_obj).attr("id")).val()
                    var price_ = $("#price-" + $(input_obj).attr("id")).text().replace("元", "")
                    var discount_ = $("#dsc-" + $(input_obj).attr("id")).text().replace("折", "")
                    console.log(discount_)
                    bill_amount += parseInt(price_) * parseInt(num_) * parseFloat(parseInt(discount_) / 100)
                    bill_amount_bf_dst += parseInt(price_) * parseInt(num_)
                    item_id_list[$(input_obj).attr("id")] = parseInt(num_)

                })

                $("#id_total_amount").val(parseInt(bill_amount))
                $("#id_bill_amount_bf_dst").val(parseInt(bill_amount_bf_dst))
                $("#id_buying_date").val("{{buying_date}}")
                $("#id_pid").val("{{ user_obj.pid }}")
                $("#id_operator").val("{{ operator_obj.id }}")
                $("#bill_datetime").text("{{buying_date}}")
                $("#bill_total").text(bill_amount + "元")
                $("#bill_amount_bf_dst").text(bill_amount_bf_dst + "元")
                $("#item_id_list").val(JSON.stringify(item_id_list))

            })
            $("#m_close").click(function () {

                $('#add-modal_id').modal('hide');
            });
            $("#pay_or_not").click(function () {

                if ($(this).is(":checked") === true) {
                    $("#id_bill_status").val(1)
                } else {
                    $("#id_bill_status").val(0)
                }
            });
        })
    </script>
{% endblock %}